<script type="text/html" id="tplUserInfo">
    <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title">会员信息</h4>
                </div>
                <div class="modal-body">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">会员资料</a></li>
                            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">颜色偏好</a></li>
                            <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">盒子信息</a></li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                    <table class="table  table-bordered">
                                        <tbody>
                                            <tr style="background-color:#f9f9f9" class="text-center"><td  colspan="4">微信账户信息</td></tr>
                                            <tr><td>姓名：</td><td>@{{user.nickname}}</td><td>微信号：</td><td>@{{user.weixin}}</td></tr>
                                            <tr><td>备注名：</td><td>@{{user.memo_name}}</td><td>会员号：</td><td >@{{user.number}}</td></tr>
                                            <tr style="background-color:#f9f9f9"  class="text-center"><td colspan="4">身形数据</td></tr>
                                            <tr><td>性别：</td><td>@{{profile.sex}}</td><td>年龄：</td><td>@{{profile.age}}</td></tr>
                                            <tr><td>身高：</td><td>@{{profile.height}}cm</td><td>体重：</td><td >@{{profile.weight}}kg</td></tr>
                                            <tr><td>上衣尺码：</td><td>@{{profile.jacket_size}}</td><td>裤子尺码：</td><td>@{{profile.pants_size}}</td></tr>
                                            <tr><td>鞋子尺码：</td><td>@{{profile.shoes_size}}</td><td>肤色：</td><td >@{{profile.skin_color}}</td></tr>
                                            <tr><td>身形：</td><td>@{{profile.figure}}</td><td>生活场景：</td><td>@{{profile.life}}</td></tr>
                                            <tr><td>行业：</td><td>@{{profile.occupation}}</td><td>职业：</td><td >@{{profile.position}}</td></tr>
                                            <tr><td>生日：</td><td>@{{profile.birthday}}</td><td>完成的事情：</td><td>@{{each profile.thing as v}} @{{v}}@{{/each}}</td>
                                            </tr>
                                            <tr><td >其他：</td><td colspan="3">@{{profile.other}}</td></tr>
                                            <tr><td>微信头像：</td><td><img src="@{{user.headimgurl}}" class="pimg" width="50px" style="cursor:pointer;"></td><td>全身照：</td><td><img src="@{{profile.photo}}" class="pimg" width="50px" style="cursor:pointer;"></td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="tab-2" class="tab-pane ">
                                <div class="panel-body">
                                    <table class="table table-hover margin bottom">
                                        <tbody>
                                            @{{each profile.color as v}}
                                                <tr>
                                                    <td class="text-center" style="width: 200px">@{{v.name}}</td>
                                                    <td class="text-center" style="background-color:@{{v.color}};width: 100px;border:1px solid #e7eaec" ></td>
                                                    <td class="text-center small">
                                                        <button type="button" class="btn btn-w-m @{{if v.value==1}}btn-danger @{{else}} btn-white @{{/if}}" >会穿</button>
                                                        <button type="button" class="btn btn-w-m @{{if v.value==2}}btn-danger @{{else}} btn-white @{{/if}}">可尝试</button>
                                                        <button type="button" class="btn btn-w-m @{{if v.value==3}}btn-danger @{{else}} btn-white @{{/if}}">不穿</button>
                                                    </td>
                                                </tr>
                                            @{{/each}}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="tab-3" class="tab-pane ">
                                <div class="panel-body">
                                    <table class="table table-bordered">
                                        <tbody>
                                            <tr style="background-color:#f9f9f9" class="text-center"><td  colspan="2">盒子数</td></tr>
                                            <tr>
                                                <td class="text-center" style="width: 200px">盒子</td>
                                                <td class="text-center">@{{boxArr.box1}}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-center" style="width: 200px">赠送盒子</td>
                                                <td class="text-center">@{{boxArr.box2}}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-center" style="width: 200px">受赠盒子</td>
                                                <td class="text-center">@{{boxArr.box3}}</td>
                                            </tr>
                                            <tr style="background-color:#f9f9f9" class="text-center"><td  colspan="2">关怀盒子</td></tr>
                                            <tr>
                                                <td class="text-center" style="width: 200px">总数</td>
                                                <td class="text-center">@{{boxArr.boxCare1}}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-center" style="width: 200px">已激活</td>
                                                <td class="text-center">@{{boxArr.boxCare2}}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-center" style="width: 200px">未激活</td>
                                                <td class="text-center">@{{boxArr.boxCare3}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2222;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
</div> 


<script type="text/javascript">
   $(function(){  
        $("#modalDialog").on('click','.pimg',function(){  
            var _this = $(this);//将当前的pimg元素作为_this传入函数  
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
        });  
    });  

    function imgShow(outerdiv, innerdiv, bigimg, _this){  
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性  
      
            /*获取当前点击图片的真实大小，并显示弹出层及大图*/  
        $("<img/>").attr("src", src).load(function(){  
            var windowW = $(window).width();//获取当前窗口宽度  
            var windowH = $(window).height();//获取当前窗口高度  
            var realWidth = this.width;//获取图片真实宽度  
            var realHeight = this.height;//获取图片真实高度  
            var imgWidth, imgHeight;  
            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
              
            if(realHeight>windowH*scale) {//判断图片高度  
                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
                    imgWidth = windowW*scale;//再对宽度进行缩放  
                }  
            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                            imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
            } else {//如果图片真实高度和宽度都符合要求，高宽不变  
                imgWidth = realWidth;  
                imgHeight = realHeight;  
            }  
                    $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放  
              
            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距  
            $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性  
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
        });  
          
        $(outerdiv).click(function(){//再次点击淡出消失弹出层  
            $(this).fadeOut("fast");  
        });  
    } 
</script>
